<template>
	<view class="">
		<view class="page" v-if="dataList.length>0">
			<view @click="mineCarDetail(item)" class="_flex dataList align-items_center mycar"  v-for="(item,index) in dataList" :key="index">
				<view class="mycar_img">
					<view v-if="series_logo" >
						<image :src="https+item.series_logo" mode="aspectFit" style="width:150rpx;height: 99rpx; border-radius: 16rpx">
						</image>
					</view>
					<view v-else >
						<image src="../../static/no_carpicture.jpg" mode="aspectFit" style="width: 150rpx;height:99rpx; border-radius: 16rpx"></image>
					</view>
				</view>
				
				<view class="news-wrap" style="width:480rpx;">
					<view style="font-weight: bold;">{{item.modelName}}</view>
					<view style="color: #888888;font-size: 24rpx;">
					{{ item.carRegistrationTime | changeDates(0,7) }}上牌/{{ item.mileage }}万公里/{{ item.cityName }}
					</view>
				</view>
				<view class="deleat" @click.stop="deleatTap(item.myCarId)">
					<uni-icons type="trash" size="20" color="#d0d0d0"></uni-icons>
				</view>
			</view>
		</view>
		<null :iconSize="160" :textSize="28" v-else></null>
		<view class="addCar" @click="addCar">
			新增车辆
		</view>
	</view>
</template>

<script>
import API from "@/api/addCar.js"
export default {
	data() {
		return {
			https: getApp().globalData.picturePath,
			dataList: []
		};
	},
	onShow() {
		this.getMyList();
	},
	methods:{
		deleatTap(id){
			const that = this
			uni.showModal({
			    title: '温馨提示',
			    content: '是否确认删除该爱车？',
			    success: function (res) {
			        if (res.confirm) {
			           API.getDeleteCar({myCarId: id}).then(res=>{
						   if(res.code == 200){
							   that.$u.toast('删除成功');
							   that.getMyList();
						   }else{
							   that.$u.toast('删除失败!');
						   }
					   })
			        } 
					// else if (res.cancel) {
			  //           console.log('用户点击取消');
			  //       }
			    }
			});
		},
			getMyList(){
				API.getMyList({page:1,limit:99}).then(res=>{
					this.dataList = res.data
				})
			},
			mineCarDetail(item){
				uni.navigateTo({
					url:`./mineCarDetail?item=${encodeURIComponent(JSON.stringify(item))}`
				})
			},
			addCar(){
				uni.navigateTo({
					url:"./editCarInfo"
				})
			}
		}
};
</script>
<style>
	page{
		background: #fff;
	}
</style>
<style scoped>
	.deleat{
		margin-left: 30rpx;
	}
	.newsTip {
		background: #F4E5C3;
		display: inline-block;
		padding: 0 8rpx;
		margin-right: 8rpx;
		font-size: 22rpx;
		border-radius: 10rpx;
	}
	
	.dataList {
		margin-top: 10px;
		border-bottom: 1px solid #eee;
		padding-bottom: 10rpx;
		margin-top: 20rpx;
	}
	.addCar{
		position: fixed;
		bottom: 0px;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		color: #fff;
		text-align: center;
		background-color: #002A55;
	}
	.mycar{
		display: flex;
		justify-content: space-between;
	}
	.mycar_img{
		width: 150rpx;
		margin-right: 20rpx;
		
	}
	.mycar_img image{
		width: 150rpx;
		height: 99rpx; 
		border-radius: 16rpx
	}
</style>